import { BoxGeometry, MeshBasicMaterial, Mesh, Color } from "three";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";

import Base from "../Base";

export default class Box {
  private cube: Mesh;
  private label: CSS2DObject;
  private cubeMaterial: MeshBasicMaterial;

  constructor() {
    const base = Base.getInstance();
    this.cubeMaterial = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = this.createCube();
    this.cube = cube;
    const label = this.createLabel();
    this.label = label;

    base.scene.add(cube);
    base.scene.add(label);

    this.initCubeEvents();
  }

  private createLabel() {
    const oLabel = document.createElement("div");
    oLabel.className = "label";
    oLabel.innerHTML = `<div>导航到LM12</div>`;
    // oLabel.textContent = "content";
    // oLabel.style.marginTop = "-1em";
    oLabel.style.backgroundColor = "skyblue";

    const label = new CSS2DObject(oLabel);
    // label.layers.set(0);
    return label;
  }
  private createCube() {
    const cube = new Mesh(new BoxGeometry(1, 1, 1), this.cubeMaterial);
    cube.position.y = 0.5;
    return cube;
  }
  private initCubeEvents() {
    this.cube.addEventListener("click", (e) => {
      this.cubeMaterial.color = new Color(0xff0000);
      this.label.position.set(2, 0, 0);
      // this.label.layers.set(0);
      this.label.element.innerHTML = "导航到LM13";
    });
  }
}
